<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.6.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//创建标签
				var p = $("<p>这是一个p标签</p>");
				//p.html("这是一个p标签");
				
				//向每个匹配的元素内部追加内容。
				//$(".box").append(p);
				
				//appendTo
				//p.appendTo($(".box"));
				
//				after在每个匹配的元素之后插入内容。
				//$(".box").after(p);
				
				//在每个匹配的元素之前插入内容。
				//$(".box").before(p);
				
				//从DOM中删除所有匹配的元素。
				//$("button").remove();
				
				$("button").click(function(){
					console.log("按钮被点击了");
				})
				//克隆匹配的DOM元素并且选中这些克隆的副本。
				$(".box").after($("button").clone(true));
			})
		</script>
	</head>
	<body>
		<div class="box">
			<h3>这是h3标签！</h3>
			<button>按钮</button>
		</div>
	</body>
</html>
